<template>
  <div>
    <el-card>
      <el-form>
        <el-form-item label="属性名称">
          <el-input style="width: 200px" v-model="attrParams.attrName" placeholder="请输入属性名称" />
        </el-form-item>
      </el-form>

      <el-button type="primary" :disabled="attrParams.attrName == ''" @click="addAttrValue">添加属性值</el-button>

      <el-table :data="attrParams.attrValueList" style="width: 100%; margin-bottom: 10px">
        <el-table-column type="index" label="序号" width="180" />
        <el-table-column prop="name" label="属性值名称" width="180">
          <template #="{ row, $index }">
            <el-input :ref="(vc:any) => (inputArr[$index] = vc)" v-if="row.flag" v-model.trim="row.valueName" @blur="editAttrValue(row, $index)"></el-input>
            <div v-else @click="clickAttrValue(row, $index)">{{ row.valueName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="属性值操作">
          <template #="{ $index }">
            <el-button @click="deleteAttrValue($index)" type="danger" icon="Delete" circle size="small" />
          </template>
        </el-table-column>
      </el-table>

      <el-button :disabled="attrParams.attrValueList.length == 0" type="primary" @click="save($parent)">保存</el-button>
      <el-button type="danger" @click="cancel">取消</el-button>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref } from 'vue'
import { Attr } from '@/utils/api/product/attr/type'
import { AttrValue } from '@/utils/api/product/attr/type'
import { reqAddOrUpdateAttr } from '@/utils/api/product/attr'
import { useCategoryStore } from '@/store/module/category'

const emit = defineEmits(['changeAddEditShow'])
const categoryStore = useCategoryStore()

const inputArr = ref<any>([])

// 收集的参数
let attrParams = reactive<Attr>({
  attrName: '', //新增的属性的名字
  attrValueList: [
    //新增的属性值数组
  ],
  categoryId: categoryStore.c3Id, //三级分类的ID
  categoryLevel: 3 //代表的是三级分类
})

// 添加属性值
const addAttrValue = () => {
  // 防止多次点击添加属性值
  const flag = attrParams.attrValueList.some((item: AttrValue) => {
    return item.valueName == ''
  })
  if (flag) {
    ElMessage.error('请先把当前的填写完毕')
    return
  }

  attrParams.attrValueList.push({
    flag: true,
    valueName: ''
  })

  nextTick(() => {
    inputArr.value[attrParams.attrValueList.length - 1].focus()
  })
}

// 编辑属性值
const editAttrValue = (row: AttrValue, index: number) => {
  // 如果是空字符串则返回
  if (attrParams.attrValueList[index].valueName === '') {
    ElMessage.error('不能为空值')
    return
  }

  const flag = attrParams.attrValueList.every((item: AttrValue, i2: number) => {
    if (index != i2) {
      return item.valueName != row.valueName
    } else {
      return true
    }
  })

  if (!flag) {
    ElMessage.error('不能重复')
    return
  }

  row.flag = false
}

// 点击某个属性值
const clickAttrValue = (row: AttrValue, index: number) => {
  row.flag = true
  nextTick(() => {
    inputArr.value[index].focus()
  })
}

// 删除属性值
const deleteAttrValue = (index: number) => {
  attrParams.attrValueList.splice(index, 1)
  inputArr.splice(index, 1)
}

// 点击取消按钮
const cancel = () => {
  emit('changeAddEditShow', false)
}

// 清空所有值
const clearAllData = () => {
  Object.assign(attrParams, {
    attrName: '', //新增的属性的名字
    attrValueList: [
      //新增的属性值数组
    ],
    categoryId: categoryStore.c3Id, //三级分类的ID
    categoryLevel: 3 //代表的是三级分类
  })
}

// 保存按钮
const save = async ($parent: any) => {
  const res = await reqAddOrUpdateAttr(attrParams)
  if (res.data.code == 200) {
    ElMessage.success('保存成功')
    $parent.$parent.getAttr()
    emit('changeAddEditShow', false)
  }
}

// 修改属性参数
const updateAttrParams = (data: Attr) => {
  Object.assign(attrParams, data)
}

defineExpose({ clearAllData, updateAttrParams })
</script>

<style scoped></style>
